<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.big{
		width:250px;
		height:250px;
	}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
	//window.onload在网页上只能写一次
	//若写多次则后者会覆盖前者
	//$(function () {})在网页上可以写多次,都有效
	$(function () {
		//给按钮1绑定单击事件
		$(":button:first").click(function (e) {
			f1();
			console.log(e);
		});
		//给图片绑定hover事件
		$("img").hover(
				//鼠标悬停时
			function () {
				$(this).addClass("big");
			},
				//鼠标离开时
			function () {
				$(this).removeClass("big");
			}
		);
		//让图片不断在显示和隐藏之间切换
		setInterval(function () {
			$("img").toggle();
		}, 2000);
	});
	function f1() {
		alert('你点击了按钮1');
	}
</script>
</head>
<body>
	<p>
		<input type="button" value="按钮1"/>
	</p>
	<p>
		<img alt="" src="../images/01.jpg">
	</p>
</body>
</html>